<script setup>
  import { onMounted, reactive,ref } from 'vue';
  import axios from 'axios'
  let table = ref(false);
  let keyword = ref('');
  const blog = reactive({
    id:0,
    title:'',
    content:'',
    flag:''
  });
  const blogs = reactive([]);
  // 新增
  onMounted(async()=>{
    let res=await axios.get('http://localhost:3000/blogs');
    let data=res.data;
    data.data.forEach(item=>{
      blogs.push(item);
    })
  })

  function btnAdd(){
      table.value = true;
      blog.id = 0;
      blog.title = '';
      blog.content = '';
      blog.flag = '';
  }
  // 编辑
  async function btnEdit(id){
      let res=await axios.get(`http://localhost:3000/blogs/${id}`);
      if(res.data.code===1000){
        console.log(res.data.data.title);
        table.value=true
        let arr=res.data.data;
        blog.id=arr.id
        blog.title=arr.title
        blog.content=arr.content
        blog.flag=arr.flag
        console.log(blog);
    }
  }
  // 保存
  async function btnSave(id){
    table.value = false;
    if(id>0){
    let res=await axios.put(`http://localhost:3000/blogs/${id}`,blog);
    if(res.data.code===1000){
      let tmpblog=blogs.filter((item)=>{
        return item.id==id;
      })[0];
      tmpblog.title = blog.title;
      tmpblog.content = blog.content;
      tmpblog.flag = blog.flag;
    }
    }else{
     let obj={
      title:blog.title,
      content:blog.content,
      flag:blog.flag
     }
      let res=await axios.post(`http://localhost:3000/blogs`,obj);
      if(res.data.code===1000){
        blogs.push(res.data.data);
      }
    }
  }
  function btnCel(){
      table.value = false;
  }
  async function btnDel(id){
    if(confirm('是否删除？')){
      
      let res=await axios.delete(`http://localhost:3000/blogs/${id}`);
      if(res.data.code===1000){
        let  index = blogs.findIndex(item => item.id === id); 
      if (index !== -1) { 
         blogs.splice(index, 1); 
      }
      }
    }
  }
  async function btnFind(){
    keyword=keyword.value.trim();
    let res=await axios.get(`http://localhost:3000/blogs?keyword=${keyword}`);
    if(res.data.code===1000){
    if (keyword === '') {
       blogs.forEach(item => {
         item.hide = false;
       });
     } else {
       blogs.forEach(item => {
          item.hide = true;
          let findData=res.data.data;
          findData.forEach(i=>{
            if(item.id===i.id){
              item.hide=false;
            }
          })
       });
      }

    }
  }
</script>

<template>
   <div>
        <input type="text" placeholder="请输入需要查询的信息" v-model="keyword">
        <input type="button" value="查询" @click="btnFind()">
        <input type="button" value="新增" @click="btnAdd()">
    </div>
    <div>
    <table class="tb">
        <tr>
            <th>id</th>
            <th>标题</th>
            <th>内容</th>
            <th>标签</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in blogs" :key="item.id" v-show="!item.hide">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.content}}</td>
                    <td>{{item.flag}}</td>
                    <td>
                        <input type="button" value="编辑" class="edit" @click="btnEdit(item.id)">
                        <input type="button" value="删除" class="delete" @click="btnDel(item.id)">
                    </td>
                </tr>
    </table>
  </div>
    <div v-show="table">
            <table>
                <tr>
                    <td>标题</td>
                    <td>
                        <input type="text"  v-model="blog.title">
                    </td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>
                        <input type="text"  v-model="blog.content">
                    </td>
                </tr>
                <tr>
                    <td>标签</td>
                    <td>
                        <input type="text"  v-model="blog.flag">
                    </td>
                </tr>
                <tr>
                    <td>操作:</td>
                    <td>
                        <input type="button" value="保存" @click="btnSave(blog.id)">
                        <input type="button" value="取消" @click="btnCel()">
                    </td>
                </tr>
            </table>
        </div>
</template>

<style scoped>
  .tb,tr,th,td{
  border: 1px solid #000;
  border-spacing: 0px;
}
</style>
